<template>
	<van-field
		:name="name"
		:readonly="readonly"
		:required="required"
		:rules="rules"
		:input-align="inputAlign"
		:label="label"
		:label-width="labelWidth"
		:label-align="labelAlign"
		:class="{uploadCustomBox: readonly ? true : false }"
	>
		<template #input>
			<van-uploader
				:max-size="20000 * 1024"
				@oversize="onOversize"
				:max-count="maxCount"
				:deletable="!readonly"
				:after-read="onRead"
				:before-delete="onDel"
				:upload-text="'最多' + maxCount + '张'"
				v-model="uploader"
			/>
		</template>
	</van-field>
</template>

<script>
import { Uploader } from 'vant';
// 附件上传组件-支持单、多张上传、限制大小、回显
import { mapGetters } from 'vuex'
import { upload_file, get_files } from '@/api/user.js'
export default {
	name: 'commonUpload',
	components: {
		'van-uploader':Uploader
	},
	props: {
		// 附件唯一标识bizType
		bizType: {
			require: false
		},
		// 回显时需要主键id
		bizId: {
			require: false
		},
		// 绑定标识
		name: {
			require: false
		},
		// 校验规则
		rules: {
			require: false
		},
		// label宽度
		labelWidth: {
			require: false,
			default: '100'
		},
		// label标题
		label: {
			require: false
		},
		// 是否只读
		readonly: {
			require: false,
			default: false
		},
		maxCount: {
			require: false,
			default: 10
		},
		required: {
			require: false,
			default: false
		},
		labelAlign: {
			require: false,
			default: 'left'
		},
		inputAlign: {
			require: false,
			default: 'left'
		},
	},
	computed: {
		...mapGetters(['fileUrl'])
	},
	data() {
		return {
			headerImage: null,
			fileType: '',
			uploader: []
		}
	},
	created() {
		if (this.bizId) {
			this.loadFile()
		}
	},
	methods: {
		onOversize(file) {
			console.log(file)
			this.$toast('文件大小不能超过 20M')
		},
		async beforeRead(file) {
			return new Promise((resolve, reject) => {
				if (file.type !== 'image/jpeg') {
					this.$toast('请上传 jpg 格式图片')
					reject()
				} else {
					let img = new File(['foo'], 'bar.jpg', {
						type: 'image/jpeg'
					})
					resolve(img)
				}
			})
		},
		loadFile() {
			let data = {
				bizId: this.bizId,
				bizType: this.bizType
			}
			get_files(data).then((res) => {
				if (res.succeed) {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i].url = this.fileUrl + res.data[i].url
					}
					this.uploader = res.data
					this.$emit('fileLoad', res.data)
				}
			})
		},
		onDel(val, index) {
			if (val.file) {
				this.$emit('delFile', val.file)
				this.uploader.splice(
					this.uploader.findIndex((item) => item.file === val.file),
					1
				)
			} else {
				this.$emit('delFile', val)
				this.uploader.splice(
					this.uploader.findIndex((item) => item.id === val.id),
					1
				)
			}
		},
		//将base64转换为文件
		dataURLtoFile(dataurl) {
			var arr = dataurl.split(',')
			var bstr = atob(arr[1])
			var n = bstr.length
			var u8arr = new Uint8Array(n)
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n)
			}
			return new File([u8arr], this.fileType, {
				type: 'image/jpeg'
			})
		},
		// 处理图片
		imgPreview(file) {
			let self = this

			// 看支持不支持FileReader
			if (!file || !window.FileReader) return
			if (/^image/.test(file.type)) {
				// 创建一个reader
				let reader = new FileReader()
				// 将图片2将转成 base64 格式
				reader.readAsDataURL(file)
				// 读取成功后的回调
				reader.onloadend = function () {
					let result = this.result
					let img = new Image()
					img.src = result
					if (this.result.length <= 500 * 1024) {
						self.headerImage = this.result
						// self.postImg();
						let file2 = self.dataURLtoFile(self.headerImage)
						console.log(file2)
						let data = new window.FormData()
						data.append('file', file2)

						self.uploader[self.uploader.length - 1].status = 'uploading'
						self.uploader[self.uploader.length - 1].message = '上传中...'

						// let data = new FormData();
						// data.append("file", file.file);
						upload_file(data).then((res) => {
							if (res.succeed) {
								self.$emit('uploadSuccess', res.data, self.bizType, file)
								self.uploader[self.uploader.length - 1].status = 'done'
								// 这里需要看上传成功后this.uploader是否有值
							} else {
								self.uploader[self.uploader.length - 1].status = 'failed'
								self.uploader[self.uploader.length - 1].message = '上传失败'
							}
						})
					} else {
						img.onload = function () {
							let data1 = self.compress(img)
							self.headerImage = data1
							let file2 = self.dataURLtoFile(self.headerImage)
							let data = new window.FormData()
							data.append('file', file2)

							self.uploader[self.uploader.length - 1].status = 'uploading'
							self.uploader[self.uploader.length - 1].message = '上传中...'

							// let data = new FormData();
							// data.append("file", file.file);
							upload_file(data).then((res) => {
								if (res.succeed) {
									self.$emit('uploadSuccess', res.data, self.bizType, file)
									self.uploader[self.uploader.length - 1].status = 'done'
									// 这里需要看上传成功后this.uploader是否有值
								} else {
									self.uploader[self.uploader.length - 1].status = 'failed'
									self.uploader[self.uploader.length - 1].message = '上传失败'
								}
							})
							// self.postImg();
						}
					}
					// 判断图片是否大于500K,是就直接上传，反之压缩图片
					// if (this.result.length <= 500 * 1024) {
					//   self.headerImage = this.result;
					//   // self.postImg();
					// } else {
					//   img.onload = function () {
					//     let data = self.compress(img, Orientation);
					//     self.headerImage = data;
					//     self.postImg();
					//   };
					// }
				}
			}
		},
		compress(img) {
			let canvas = document.createElement('canvas')
			let ctx = canvas.getContext('2d')
			//瓦片canvas
			let tCanvas = document.createElement('canvas')
			let tctx = tCanvas.getContext('2d')
			// let initSize = img.src.length;
			let width = img.width
			let height = img.height
			//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
			let ratio
			if ((ratio = (width * height) / 4000000) > 1) {
				// console.log("大于400万像素");
				ratio = Math.sqrt(ratio)
				width /= ratio
				height /= ratio
			} else {
				ratio = 1
			}
			canvas.width = width
			canvas.height = height
			// 铺底色
			ctx.fillStyle = '#fff'
			ctx.fillRect(0, 0, canvas.width, canvas.height)
			//如果图片像素大于100万则使用瓦片绘制
			let count
			if ((count = (width * height) / 1000000) > 1) {
				count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
				//            计算每块瓦片的宽和高
				let nw = ~~(width / count)
				let nh = ~~(height / count)
				tCanvas.width = nw
				tCanvas.height = nh
				for (let i = 0; i < count; i++) {
					for (let j = 0; j < count; j++) {
						tctx.drawImage(
							img,
							i * nw * ratio,
							j * nh * ratio,
							nw * ratio,
							nh * ratio,
							0,
							0,
							nw,
							nh
						)
						ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
					}
				}
			} else {
				ctx.drawImage(img, 0, 0, width, height)
			}
			//进行最小压缩
			let ndata = canvas.toDataURL('image/jpeg', 0.6)
			tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
			return ndata
		},
		onRead(file) {
			this.fileType = file.file.name
			// 压缩图片
			this.imgPreview(file.file)
		}
	}
}
</script>
<style lang="less" scoped>
.uploadCustomBox {
	
	/deep/.van-uploader__upload {
		display: none;
	}
}
// .isBlock {
// 	display: block!important;
// }
// /deep/.van-field__control--custom {
// 	justify-content: center;
// }
</style>
